<template>
  <div class="container">
    <div class="main">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item> <a href="/">工作台</a> </el-breadcrumb-item>
        <el-breadcrumb-item>
          <a href="/Pagemanagement">页面管理</a>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="footer">
      <div style="display: flex;padding: 0 60px;" class="top">
        <p
          style="display: flex;align-items: center;padding-top: 30px;margin-left: 30px;padding-right: 50px"
        >
          名称:
          <el-input
            v-model="input"
            placeholder="请输入用户标题"
            style="width: 200px;height: 25px;padding-left: 4px;"
          />
        </p>
        <p
          style="display: flex;align-items: center;padding-top: 30px;margin-left: 30px;padding-right: 50px"
        >
          路径:
          <el-input
            v-model="input1"
            placeholder="请输入用户标题"
            style="width: 200px;height: 25px;padding-left: 4px;"
          />
        </p>
        <p
          style="display: flex;align-items: center;padding-top: 30px;margin-left: 30px;padding-right: 50px"
        >
          状态:
          <el-select v-model="value" class="m-2">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </p>
     
        <div style="float: right;margin:10px 70px;">
          <el-button style="padding: 5px;margin-right: 10px;" type="primary" @click="sou()">搜索</el-button>
          <button style="padding: 5px;" @click="chong()">重置</button>
        </div>
      </div>
      <div class="bom">
        <p>
          <el-button type="primary" style="float: right;margin: 16px;" @click="jian()">创建</el-button>
        </p>
        <el-table ref="multipleTableRef" :data="list" style="width: 100%">
          <el-table-column type="selection" width="55" />
          <el-table-column label="名称" width="180" style="height: 100px;display: block;">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span style="margin-left: 10px">{{ scope.row.username }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="路径" width="130">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span style="margin-left: 10px">{{ scope.row.lujing }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="顺序" width="130">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span style="margin-left: 10px">{{ scope.row.shunxu }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="阅读量" width="130">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span style="margin-left: 10px">{{ scope.row.num }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="130">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span style="margin-left: 10px">{{ scope.row.type }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="发布时间" width="240">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span style="margin-left: 10px">{{ scope.row.data }}</span>
              </div>
            </template>
          </el-table-column>
          
          <el-table-column label="操作">
            <template #default="scope">
              <el-button size="small" @click="bian(scope.row.id)">编辑</el-button>
              <el-button
                size="small"
                type="danger"
                @click="handleshou(scope.$index, scope.row)"
              >{{ scope.row.caozuo }}</el-button>
              <el-button size="small" @click="handlefang()">查开访问</el-button>
              <el-button size="small" @click="handledel(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="example-pagination-block">
          <el-pagination
            layout="prev, pager, next"
            :page-size="3"
            :total="length"
            @current-change="changeCode"
          ></el-pagination>
        </div>
      </div>
    </div>
    <el-dialog
    v-model="dialogVisible"
    title="访问统计"
    width="30%"
   
  >
 
    <div style="width: 450px;height: 200px; border-left: 2px solid #ccc; border-bottom: 2px solid #ccc;"></div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >Confirm</el-button
        >
      </span>
    </template>
  </el-dialog>
  </div>
</template>

<script lang="ts">
import {hli,gai,shanchu,yesou} from '../../api'
import { ElMessage } from 'element-plus'
import { defineComponent ,ref,onMounted,reactive} from 'vue'
import {useRouter} from 'vue-router'
import {debounce} from 'lodash'
export default defineComponent({
  setup() {
    const token1 = localStorage.getItem('token1')
    const router=useRouter()
    const options = [
      {
        value: '已发布',
        label: '已发布',
      },
      {
        value: '草稿',
        label: '草稿',
      }
    ]
    const dialogVisible = ref(false)
    const value = ref('')
    const value1 = ref('')
    const input = ref('')
    const input1 = ref('')
    const length = ref('')
    const list=ref()
    const chong = () => {
      value1.value = '',
        value.value = '',
        input.value = ''
        hli().then(res=>{
          console.log(res);
          list.value=res.data.data.slice((page.pageCode - 1) * page.pageSize, page.pageCode * page.pageSize)
          length.value=res.data.total
        })
    }
    const data1=ref('')
    var d = new Date();  //获取时间
    var hour = d.getHours(); //获取小时
    var minute = d.getMinutes();//获取分 bn
    var second = d.getSeconds();//获取秒
    console.log(d.getFullYear()); //年
    console.log(d.getMonth() + 1);  //月
    console.log(d.getDate())   //日
    console.log(hour, minute, second);  //小时分钟秒
    data1.value = '' + d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + ' ' + hour + ':' + minute + ':' + second

    const page = reactive({
      pageCode: 1,
      pageSize: 3
    })
    const changeCode = (pageCode: number) => {
      console.log(pageCode);

      page.pageCode = pageCode
      console.log(page);

      hli().then(res=>{
          console.log(res);
          list.value=res.data.data.slice((page.pageCode - 1) * page.pageSize, page.pageCode * page.pageSize)
          length.value=res.data.total
        })

    }
    onMounted(()=>{
        hli().then(res=>{
          console.log(res);
          list.value=res.data.data.slice((page.pageCode - 1) * page.pageSize, page.pageCode * page.pageSize)
          length.value=res.data.total
        })
    })
    // 页面管理搜索
    const sou=debounce(()=>{
      console.log(input,input1,value,data1);
       yesou({input,input1,value,data1}).then(res=>{
         console.log(res);
        
          list.value=res.data.data
          length.value=res.data.total
       
       })
    },300)

    //  页面管理创建
    const jian=()=>{
      if(token1==='管理员'){
        router.push('/chuang')
      }else{
        ElMessage({
          message: '访客无权操作',
          type: 'success',
        })
      }
    }
    

    // 发布
    const handleshou=(id:any,v:any)=>{
      // console.log(id,v.id);
      if(token1==='管理员'){
        gai(v).then(res=>{
        console.log(res);
        hli().then(res=>{
          console.log(res);
          list.value=res.data.data
          length.value=res.data.total
        })
      })
      }else{
        ElMessage({
          message: '访客无权操作',
          type: 'success',
        })
      }
    }
   const handlefang=()=>{
    dialogVisible.value=true
   }
  //  页面管理删除
   const handledel=(id:any,v:any)=>{
     console.log(id,v);
      if(token1==='管理员'){
        shanchu(v).then(res=>{
        console.log(res);
        hli().then(res=>{
          console.log(res);
          list.value=res.data.data
          length.value=res.data.total
        })
      })
      }else{
        ElMessage({
          message: '访客无权操作.',
          type: 'success',
        })
      }
   }
   const bian=(id:any)=>{
      router.push('/yebian/'+id)
   }
    return {
      bian,
     input,
     value,
     value1,
     options,
     chong,
     sou,
     input1,
     list,
     changeCode,
     length,
     handlefang,
     handleshou,
     dialogVisible,
     handledel,
     jian
    }
  }
})
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
  background: #eee;
}
.bom{
  background: #fff;
}
.main{
  width: 100%;
  height: 30px;
  background: #fff;
  padding-left: 20px;
  padding-top: 10px;
}
.top {
  width: 90%;
  height: 130px;
  background: #fff;
  margin: 20px;
}
</style>
